<!DOCTYPE html>
<html>
<head>
    <title>出库列表</title>
    #parse("sys/header.html")
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <i-form ref="formValidate" :model="materialBase" :rules="ruleValidate" :label-width="80">
            <Row>
                <i-col span="8">
                    <Form-item label="领料单号" prop="materCode">
                        {{materialBase.materCode}}
                    </Form-item>
                </i-col>
                <i-col span="8">
                    <Form-item label="领料时间" prop="pickDate">
                        {{transDate(materialBase.pickDate,"yyyy-MM-dd hh:mm")}}
                    </Form-item>
                </i-col>
            </Row>
            <Row>
                <i-col span="8">
                    <Form-item label="领用部门" prop="deptId">
                        {{materialBase.deptId}}
                    </Form-item>
                </i-col>
                <i-col span="8">
                    <Form-item label="领料人" prop="picker">
                        {{materialBase.pickerName}}
                    </Form-item>
                </i-col>
                <i-col span="8">
                    <Form-item label="备件用途" prop="purpose">
                        {{materialBase.purpose}}
                    </Form-item>
                </i-col>
            </Row>
        </i-form>
    </div>

    <Card v-show="showList">
        <!--<Row :gutter="16" style="margin: 3px 0px">
            <div class="search-group">
                <i-col span="4">
                    <i-input v-model="q.spareCode" @on-enter="query" placeholder="工装编码"/>
                </i-col>
                <i-button @click="query">查询</i-button>
                <i-button @click="reloadSearch">重置</i-button>
            </div>
        </Row>-->
        <table id="jqGrid"></table>
    </Card>
</div>

<script>

    let id = getQueryString("id");
    $(function () {
        var url = '../materialrecord/list?material=' + id
        vm.getInfo(id);
        $("#jqGrid").Grid({
            url: url,
            multiselect: false,
            rowNum: 15,
            height:250,
            colModel: [
                {label: '备件编码', name: 'spareCode', index: 'SPARE_CODE', width: 80},
                {label: '仓库代码', name: 'storeCode', index: 'storeCode', width: 80},
                {label: '仓库名称', name: 'storeName', index: 'storeName', width: 80},
                {label: '备件位置', name: 'postion', index: 'postion', width: 80},
                {label: '数量', name: 'num', index: 'NUM', width: 80},
                {label: 'id', name: 'id', index: 'ID', key: true, hidden: true},
                {label: 'store', name: 'store', index: 'store',hidden: true},
            ]
        });
    });

    let vm = new Vue({
        el: '#rrapp',
        data: {
            showList: true,
            title: null,
            materialBase: {},
            ruleValidate: {
            },
            q: {
                spareCode: ''
            },
        },
        methods: {
            query: function () {
                vm.reload();
            },
            reload: function (event) {
                vm.showList = true;
                let page = $("#jqGrid").jqGrid('getGridParam', 'page');
                $("#jqGrid").jqGrid('setGridParam', {
                    postData: {'spareCode': vm.q.spareCode},
                    page: page
                }).trigger("reloadGrid");
                vm.handleReset('formValidate');
            },
            reloadSearch: function () {
                vm.q = {
                    spareCode: ''
                };
                vm.reload();
            },
            handleReset: function (name) {
                handleResetForm(this, name);
            },
            getInfo: function (id) {
                Ajax.request({
                    url: "../materialbase/infoDetail/" + id,
                    async: true,
                    successCallback: function (r) {
                        vm.materialBase = r.materialBase;
                    }
                });
            },
            isCheckAll: function (isCheck) {
                return sysEnums.MATER_CHECK_FLAG[isCheck];
            }
        }
    });

</script>
</body>
</html>
